/* ESTILOS PARA ADAPTAR EL BANNER DE LA IMAGEN AL INICIO DE LA PANTALLA */
#imagen {
    position: relative; /* Cambiado a relative en lugar de absolute */
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100vh;
    margin-bottom: 0; /* Eliminamos el margen inferior */
    padding: 0; /* Eliminamos el relleno */
}

#imagen img {
    width: 100%;
    height: auto;
}

.Obituarios {
    position: sticky;
    top: 0;
    background-color: #f0f0f0;
    padding: 20px;
    margin-top: 0; /* Eliminamos el margen superior */
}

/* ESTILOS PARA EL OBITUARIO */
h1 {
    font-family: 'Times New Roman', serif; /* Fuente Times New Roman */
    font-size: 48px; /* Tamaño de fuente personalizable */
    font-weight: bold; /* Negrita */
    color: rgb(0, 0, 0); /* Color beige personalizable */
    text-align: center; /* Alineación de texto al centro */
}

h5 {
    font-family: 'Times New Roman', serif; /* Fuente Times New Roman */
    font-size: 48px; /* Tamaño de fuente personalizable */
    font-weight: bold; /* Negrita */
    color: rgb(136, 117, 30); 
    text-align: center; /* Alineación de texto al centro */
}
#imgob {
	display: inline-block; 
	position: relative;
}
/* este codigo de abajo coloca la imagen blanco y negro */	
#img1 {
	filter: grayscale(0%);
}
	
#img1:hover {
    filter: grayscale(100%);
    transition: filter 0.5s;
}

.retro-photo-container {
		background-color: #948d8d; /* Fondo gris claro */
		border: 1px solid #ccc; /* Borde gris */
		padding: 20px;
		border-radius: 10px; /* Bordes redondeados */
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Sombra */
}
	
.retro-photo {
		border: 5px solid #fff; /* Borde blanco */
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Sombra más oscura */
		transition: transform 0.2s ease-in-out;
}
	
.retro-photo:hover {
		transform: scale(1.05); /* Aumentar tamaño al pasar el ratón */
		transition: transform 0.2s ease-in-out;
}

.retro-photo-container {
    background-color: #f5f5f5; /* Fondo gris claro */
    border: 1px solid #ccc; /* Borde gris */
    padding: 20px;
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Sombra */
}

.retro-photo {
    border: 5px solid #fff; /* Borde blanco */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* Sombra más oscura */
    transition: transform 0.2s ease-in-out;
}

.retro-photo:hover {
    transform: scale(1.05); /* Aumentar tamaño al pasar el ratón */
    transition: transform 0.2s ease-in-out;
}

/* Estilo para el título */
.retro-photo-container h1 {
    font-family: 'Pacifico', cursive;
    font-size: 24px; /* Tamaño de fuente personalizado */
}

/* Estilo para los otros elementos de texto */


.visible {
    display: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.telefono-container {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

.telefono-container.visible {
    max-height: 1000px; /* Ajusta la altura máxima según sea necesario */
}

.NombreObit{
    font-family: 'Dancing Script', serif; 
    font-size:30px; /* Tamaño de fuente personalizable */
    font-weight: bold; /* Negrita */
    color: rgb(94, 91, 91); /* Color beige personalizable */
    text-align: center; 
}